<template>
    <iframe style="display: none;" :src="baseUrl" frameborder="0"></iframe>
    <div class="top-header">
        <div v-if="lang == 'zh'" class="top-img"></div>
        <div v-if="lang == 'en'" class="top-img_en"></div>
    </div>
    <div class="login_wp content_main" v-if="!isRegister">
        <div class="main">
            <div class="tabs_wp">{{ $t('login_title') }}</div>
            <div class="login-pwd">
                <div class="tab__form">
                    <div class="form__item" style="border-bottom: 1px solid #e3e5e7;">
                        <div>{{ $t('username') }}</div> 
                        <input @keydown.enter="isContacUser_fn(0)" v-model="user_info.username" autocomplete="on" maxlength="32" oninput="value=value.replace(/\s+/g, '')" :placeholder="$t('username_msg')" type="text"></div> 
                        <div class="form__separator-line"></div> 
                        <div class="form__item">
                            <div>{{ $t('password') }}</div> 
                            <input @keydown.enter="isContacUser_fn(0)" v-model="user_info.password" autocomplete="on" maxlength="32" oninput="value=value.replace(/\s+/g, '')" :placeholder="$t('password_msg')" :type="password_type"> <div data-v-51f92a9c="" class="eye-btn">
                                <svg v-if="password_type == 'password'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="#9499A0" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5753 6.85456C17.7122 6.71896 17.8939 6.63806 18.0866 6.63806C18.7321 6.63806 19.0436 7.42626 18.5748 7.87006C18.1144 8.30554 17.457 8.69885 16.6478 9.03168L18.1457 10.5296C18.2101 10.5941 18.2613 10.6706 18.2962 10.7548C18.331 10.839 18.349 10.9293 18.349 11.0204C18.349 11.1116 18.331 11.2019 18.2962 11.2861C18.2613 11.3703 18.2101 11.4468 18.1457 11.5113C18.0812 11.5757 18.0047 11.6269 17.9205 11.6618C17.8363 11.6967 17.746 11.7146 17.6548 11.7146C17.5637 11.7146 17.4734 11.6967 17.3892 11.6618C17.305 11.6269 17.2284 11.5757 17.164 11.5113L15.3409 9.68819C15.2898 9.63708 15.247 9.57838 15.2141 9.51428C14.4874 9.71293 13.6876 9.87122 12.8344 9.98119C12.8363 9.99011 12.8381 9.99908 12.8397 10.0081L13.2874 12.5472C13.315 12.7266 13.2713 12.9098 13.1656 13.0573C13.0598 13.2049 12.9005 13.3052 12.7217 13.3367C12.5429 13.3683 12.3589 13.3285 12.2091 13.2259C12.0592 13.1234 11.9555 12.9663 11.9202 12.7882L11.4725 10.2491C11.4645 10.2039 11.4611 10.1581 11.4621 10.1125C10.9858 10.1428 10.4976 10.1586 10.0002 10.1586C9.57059 10.1586 9.14778 10.1468 8.73362 10.1241C8.73477 10.1656 8.7322 10.2074 8.72578 10.249L8.27808 12.7881C8.24612 12.9694 8.14345 13.1306 7.99265 13.2362C7.84186 13.3418 7.65528 13.3831 7.47398 13.3512C7.29268 13.3192 7.1315 13.2166 7.0259 13.0658C6.9203 12.915 6.87892 12.7284 6.91088 12.5471L7.35858 10.008C7.35877 10.007 7.35896 10.0061 7.35915 10.0052C6.50085 9.90284 5.6941 9.75191 4.95838 9.56025C4.93012 9.60634 4.89634 9.64933 4.85748 9.68819L3.03438 11.5113C2.96992 11.5757 2.8934 11.6269 2.80918 11.6618C2.72496 11.6967 2.63469 11.7146 2.54353 11.7146C2.45237 11.7146 2.36211 11.6967 2.27789 11.6618C2.19367 11.6269 2.11714 11.5757 2.05268 11.5113C1.98822 11.4468 1.93709 11.3703 1.90221 11.2861C1.86732 11.2019 1.84937 11.1116 1.84937 11.0204C1.84937 10.9293 1.86732 10.839 1.90221 10.7548C1.93709 10.6706 1.98822 10.5941 2.05268 10.5296L3.49373 9.08855C2.6197 8.744 1.91247 8.33062 1.42559 7.87006C0.956591 7.42636 1.26799 6.63816 1.91359 6.63816C2.10629 6.63816 2.28789 6.71896 2.42489 6.85456C2.70009 7.12696 3.19529 7.45886 3.98459 7.77796C5.54429 8.40856 7.73699 8.77016 10.0001 8.77016C12.2632 8.77016 14.4558 8.40856 16.0156 7.77796C16.8049 7.45886 17.3001 7.12696 17.5753 6.85456Z" fill="#9499A0"></path></svg>
                                <svg v-else="password_type == 'text'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.11069 9.43732C3.21647 7.77542 5.87904 4.58331 9.89458 4.58331C13.8801 4.58331 16.6483 7.72502 17.8345 9.4049C18.0905 9.76747 18.0905 10.2325 17.8345 10.5951C16.6483 12.2749 13.8801 15.4166 9.89458 15.4166C5.87904 15.4166 3.21647 12.2245 2.11069 10.5626C1.88009 10.2161 1.88009 9.7839 2.11069 9.43732ZM9.89458 3.33331C5.19832 3.33331 2.20919 7.03277 1.07001 8.74489C0.560324 9.51091 0.560323 10.4891 1.07001 11.2551C2.20919 12.9672 5.19832 16.6666 9.89458 16.6666C14.5412 16.6666 17.6368 13.0422 18.8556 11.3161C19.4168 10.5213 19.4168 9.4787 18.8556 8.68391C17.6368 6.95774 14.5412 3.33331 9.89458 3.33331ZM7.29165 9.99998C7.29165 8.50421 8.50421 7.29165 9.99998 7.29165C11.4958 7.29165 12.7083 8.50421 12.7083 9.99998C12.7083 11.4958 11.4958 12.7083 9.99998 12.7083C8.50421 12.7083 7.29165 11.4958 7.29165 9.99998ZM9.99998 6.04165C7.81385 6.04165 6.04165 7.81385 6.04165 9.99998C6.04165 12.1861 7.81385 13.9583 9.99998 13.9583C12.1861 13.9583 13.9583 12.1861 13.9583 9.99998C13.9583 7.81385 12.1861 6.04165 9.99998 6.04165Z" fill="#9499A0"></path></svg>
                            </div> 
                            <!-- <div class="clickable">忘記密碼？</div> -->
                        </div>
                        
                    </div>
                    <div class="btn_wp"> 
                        <div class="btn_primary" @click="isContacUser_fn(0)">{{ $t('login') }} / {{ $t('register') }}</div>
                        <!-- <div class="btn_primary" @click="isContacUser_fn(2)">{{ $t('register') }}</div> -->
                        <!-- <div class="btn_primary" @click="isContacUser_fn(1)">{{ $t('tourist_login') }}</div> -->
                    </div>
                    <div v-show="!user_infoStore.userToken && !turnstileToken" id="turnstile-widget-container" class="cf-turnstile" data-sitekey="0x4AAAAAAA5XWjuuv0turKm2" :data-language="lang"></div>
            </div>
            <div class="third-party-login-wrapper">
                <div class="title">{{ $t('other_login') }}</div> 
                <div class="sns">
                    <a @click="to_fb">
						<span class="btn facebook">Facebook {{ $t('login') }}</span> 
					</a>
                    <a @click="to_yh" v-if="!isFaceBook">
						<span class="btn Yahoo">Yahoo {{ $t('login') }}</span> 
					</a>
                    <a @click="to_gg" v-if="!isFaceBook">
						<span class="btn Google">Google {{ $t('login') }}</span> 
					</a>
                    <a @click="isContacUser_fn(1)">
						<span class="btn tourist">{{ $t('tourist_login') }}</span> 
					</a>
                    <!-- <span class="btn yahoo">Yahoo登錄</span> -->
                </div>
            </div>
            <div class="login-protocol">
                <p>{{ $t('login_msg') }}</p> 
                <p>{{ $t('login_msg2') }}</p> 
                <!-- <p>登錄即代表你同意
                    <label>
                        <a class="clickable" href="https://www.bilibili.com/protocal/licence.html" target="_blank">用戶協議</a>
                    </label>和
                    <label>
                        <a class="clickable" href="https://www.bilibili.com/blackboard/privacy-pc.html" target="_blank">隱私政策</a>
                    </label>
                </p> -->
            </div>
            
        </div>
        
    </div>

    <div class="login_wp content_main register" v-if="isRegister">
        <div class="main">
            <div class="tabs">
                <div @click="back_login" class="tabs_wp" :class="{active:!isRegister}">{{ $t('login') }}</div>
                <div class="tabs_wp" :class="{active:isRegister}">{{ $t('register') }}</div>
            </div>
            <div class="login-pwd">
                <div class="tab__form">
                    <div class="form__item" style="border-bottom: 1px solid #e3e5e7;">
                        <div>{{ $t('username') }}</div> 
                        <input v-model="register_info.username" autocomplete="on" maxlength="32" oninput="value=value.replace(/\s+/g, '')" :placeholder="$t('username_msg')" type="text"></div> 
                        <div class="form__separator-line"></div> 
                        <div class="form__item">
                            <div>{{ $t('password') }}</div> 
                            <input v-model="register_info.password" autocomplete="on" maxlength="32" oninput="value=value.replace(/\s+/g, '')" :placeholder="$t('password_msg')" :type="password_type"> <div data-v-51f92a9c="" class="eye-btn">
                                <svg v-if="password_type == 'password'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="#9499A0" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5753 6.85456C17.7122 6.71896 17.8939 6.63806 18.0866 6.63806C18.7321 6.63806 19.0436 7.42626 18.5748 7.87006C18.1144 8.30554 17.457 8.69885 16.6478 9.03168L18.1457 10.5296C18.2101 10.5941 18.2613 10.6706 18.2962 10.7548C18.331 10.839 18.349 10.9293 18.349 11.0204C18.349 11.1116 18.331 11.2019 18.2962 11.2861C18.2613 11.3703 18.2101 11.4468 18.1457 11.5113C18.0812 11.5757 18.0047 11.6269 17.9205 11.6618C17.8363 11.6967 17.746 11.7146 17.6548 11.7146C17.5637 11.7146 17.4734 11.6967 17.3892 11.6618C17.305 11.6269 17.2284 11.5757 17.164 11.5113L15.3409 9.68819C15.2898 9.63708 15.247 9.57838 15.2141 9.51428C14.4874 9.71293 13.6876 9.87122 12.8344 9.98119C12.8363 9.99011 12.8381 9.99908 12.8397 10.0081L13.2874 12.5472C13.315 12.7266 13.2713 12.9098 13.1656 13.0573C13.0598 13.2049 12.9005 13.3052 12.7217 13.3367C12.5429 13.3683 12.3589 13.3285 12.2091 13.2259C12.0592 13.1234 11.9555 12.9663 11.9202 12.7882L11.4725 10.2491C11.4645 10.2039 11.4611 10.1581 11.4621 10.1125C10.9858 10.1428 10.4976 10.1586 10.0002 10.1586C9.57059 10.1586 9.14778 10.1468 8.73362 10.1241C8.73477 10.1656 8.7322 10.2074 8.72578 10.249L8.27808 12.7881C8.24612 12.9694 8.14345 13.1306 7.99265 13.2362C7.84186 13.3418 7.65528 13.3831 7.47398 13.3512C7.29268 13.3192 7.1315 13.2166 7.0259 13.0658C6.9203 12.915 6.87892 12.7284 6.91088 12.5471L7.35858 10.008C7.35877 10.007 7.35896 10.0061 7.35915 10.0052C6.50085 9.90284 5.6941 9.75191 4.95838 9.56025C4.93012 9.60634 4.89634 9.64933 4.85748 9.68819L3.03438 11.5113C2.96992 11.5757 2.8934 11.6269 2.80918 11.6618C2.72496 11.6967 2.63469 11.7146 2.54353 11.7146C2.45237 11.7146 2.36211 11.6967 2.27789 11.6618C2.19367 11.6269 2.11714 11.5757 2.05268 11.5113C1.98822 11.4468 1.93709 11.3703 1.90221 11.2861C1.86732 11.2019 1.84937 11.1116 1.84937 11.0204C1.84937 10.9293 1.86732 10.839 1.90221 10.7548C1.93709 10.6706 1.98822 10.5941 2.05268 10.5296L3.49373 9.08855C2.6197 8.744 1.91247 8.33062 1.42559 7.87006C0.956591 7.42636 1.26799 6.63816 1.91359 6.63816C2.10629 6.63816 2.28789 6.71896 2.42489 6.85456C2.70009 7.12696 3.19529 7.45886 3.98459 7.77796C5.54429 8.40856 7.73699 8.77016 10.0001 8.77016C12.2632 8.77016 14.4558 8.40856 16.0156 7.77796C16.8049 7.45886 17.3001 7.12696 17.5753 6.85456Z" fill="#9499A0"></path></svg>
                                <svg v-else="password_type == 'text'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.11069 9.43732C3.21647 7.77542 5.87904 4.58331 9.89458 4.58331C13.8801 4.58331 16.6483 7.72502 17.8345 9.4049C18.0905 9.76747 18.0905 10.2325 17.8345 10.5951C16.6483 12.2749 13.8801 15.4166 9.89458 15.4166C5.87904 15.4166 3.21647 12.2245 2.11069 10.5626C1.88009 10.2161 1.88009 9.7839 2.11069 9.43732ZM9.89458 3.33331C5.19832 3.33331 2.20919 7.03277 1.07001 8.74489C0.560324 9.51091 0.560323 10.4891 1.07001 11.2551C2.20919 12.9672 5.19832 16.6666 9.89458 16.6666C14.5412 16.6666 17.6368 13.0422 18.8556 11.3161C19.4168 10.5213 19.4168 9.4787 18.8556 8.68391C17.6368 6.95774 14.5412 3.33331 9.89458 3.33331ZM7.29165 9.99998C7.29165 8.50421 8.50421 7.29165 9.99998 7.29165C11.4958 7.29165 12.7083 8.50421 12.7083 9.99998C12.7083 11.4958 11.4958 12.7083 9.99998 12.7083C8.50421 12.7083 7.29165 11.4958 7.29165 9.99998ZM9.99998 6.04165C7.81385 6.04165 6.04165 7.81385 6.04165 9.99998C6.04165 12.1861 7.81385 13.9583 9.99998 13.9583C12.1861 13.9583 13.9583 12.1861 13.9583 9.99998C13.9583 7.81385 12.1861 6.04165 9.99998 6.04165Z" fill="#9499A0"></path></svg>
                            </div> 
                            <!-- <div class="clickable">忘記密碼？</div> -->
                        </div>
                        
                    </div>
                    <div class="btn_wp"> 
                        <div class="btn_primary btn_reg" @click="register_user">{{ $t('register') }}</div>
                    </div>
            </div>
            
        </div>
        
    </div>
    <!-- <Perustarkistus v-if="isContacUser" :login="login" :isContacUser="isContacUser" :isContacUser_close="isContacUser_close"/> -->
    <Footer/>

    <VerificationCode :visible="isVerifyEmail" ref="verificationCode"/>
</template>

<script setup>
import Footer from "@/components/Footer/index.vue"  //底部
// import Perustarkistus from "@/components/Perustarkistus/index.vue"
import { ref,reactive } from 'vue'
import axios from '@/utils/api'
import { useRouter } from "vue-router"
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useLoadingStore } from '@/store/modules/loading/index';
import Fingerprint2 from 'fingerprintjs2'
import VerificationCode from "@/components/VerificationCode/index.vue"
import {generateJWT} from "@/utils/jwt"
const loadingStore = useLoadingStore();
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const router = useRouter()
let password_type = ref('password')

let isRegister = ref(false)
const verificationCode = ref()
const isVerifyEmail = ref(false)

let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}

let isFaceBook = false

const isFacebookBrowser = () => {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    return /FBAN|FBAV/.test(userAgent); // 匹配Facebook浏览器的标识符
}

if (isFacebookBrowser()) {
    // console.log("当前是Facebook浏览器");
    isFaceBook = true
} else {
    // console.log("当前不是Facebook浏览器");
    isFaceBook = false
}
const change_password_type = ()=>{
    if(password_type.value == 'password'){
        password_type.value = 'text'
    }else{
        password_type.value = 'password'
    }
}

let isContacUser = ref(false)
const isContacUser_close = ()=>{
    isContacUser.value = false
}


const user_info = reactive({
    username:'',
    password:'',
    form_type:'login'
})

const isContacUser_fn =async (type)=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    if(type == 1){ //游客登录
        tourist_login()
        return
    }else if(type == 2){
        isRegister.value = true
        return
    }
    let regex_username = /^[A-Za-z0-9@.,_]{4,20}$/;

    const res = await axios.get('/verifyUser?username='+user_info.username)
    if(res.data.res == 'F'){
        login()
        return
    }else{
        regex_username  = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    }
    const regex_password = /^[A-Za-z0-9@.,_]{8,20}$/;
    
    if(!regex_username.test(user_info.username)){
        if(lang.value == 'en'){
            ElMessage.error('The format of the account email is incorrect, please re-enter')
        }else{
            ElMessage.error('賬號電子信箱格式不準確，請重新輸入')
        }
        
        return
    }

    if(!regex_password.test(user_info.password)){
        if(lang.value == 'en'){
            ElMessage.error('The password format is not accurate, at least 8 is the password')
        }else{
            ElMessage.error('密碼格式不準確，最少8位密碼')
        }
        
        return
    }
    
    // isContacUser.value = true
    login()
}

const login = async () =>{
    console.log(123456,user_info);
    
    const res = await axios.post('/register_login',user_info)
    console.log(res,123555);
    if(res.code === 1){
        if(lang.value == 'en'){
            ElMessage.success('Registration successful, logged in')
        }else{
            ElMessage.success('註冊成功，請完成電子信箱驗證')
        }
        
        user_infoStore.setUserToken(res.data.token)
        user_infoStore.setUserToken_expire(res.data.expire)
        user_infoStore.setUserinfo(res.data.user_info)

        if(userInfo.status == 3){ //未激活触发邮箱绑定
            // verificationCode.value.send_code()
            isVerifyEmail.value = true
            return
        }

        router.replace('/home')
    }else if(res.code === 0){
        if(lang.value == 'en'){
            ElMessage.success('Login succeeded')
        }else{
            ElMessage.success('登錄成功')
        }
       
        user_infoStore.setUserToken(res.data.token)
        user_infoStore.setUserToken_expire(res.data.expire)
        user_infoStore.setUserinfo(res.data.user_info)
        
        console.log(user_infoStore.userInfo);
        router.replace('/home')
    }else if(res.code === 9003){
        if(lang.value == 'en'){
            ElMessage.error('The account does not exist, please register first')
        }else{
            ElMessage.error('賬號不存在，請先註冊')
        }
    }else{
        ElMessage.error(res.message)
    }
    
}



const tourist_login = async () =>{

    Fingerprint2.get(async (components) => {
        const values = components.map((component) => component.value) 
        const fingercode = Fingerprint2.x64hash128(values.join(''), 31) 
        console.log('浏览器指纹：',fingercode) 


        const res = await axios.get('/tourist_register_login?code='+fingercode)
        console.log(res);
        if(res.code === 1){
            if(lang.value == 'en'){
                ElMessage.success('Tourist login')
            }else{
                ElMessage.success('遊客登入')
            }
        
            user_infoStore.setUserToken(res.data.token)
            user_infoStore.setUserToken_expire(res.data.expire)
            user_infoStore.setUserinfo(res.data.user_info)
            router.replace('/home')
        }else{
            ElMessage.error(res.message)
        }
    })     
    
    
}

const register_info = reactive({
    username:'',
    password:'',
    form_type:'register'
})

const register_user = async ()=>{
    const res = await axios.post('/register_login',register_info)
    console.log(res);
    if(res.code === 200){
        if(lang.value == 'en'){
            ElMessage.success('Registration successful, logged in')
        }else{
            ElMessage.success('註冊成功')
        }
        user_info.username = register_info.username
        user_info.password = register_info.password
        user_info.game_id = register_info.game_id
        user_info.form_type = 'login'
        login()
    }else if(res.code === 6001){
        if(lang.value == 'en'){
            ElMessage.error('The username format is incorrect')
        }else{
            ElMessage.error('用戶名格式不正確')
        }
    }else{
        ElMessage.error(res.message)
    }
    
}

const fb_url = ref('')
const get_fb_auth_url = async ()=>{
	const res = await axios.get('/get_fb_auth_url?type=login')
	console.log(res);
	if(res.code === 200){
		fb_url.value = res.data.fb_auth_url
	}
}
get_fb_auth_url()

const to_fb = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = fb_url.value
}

const yh_url = ref('')
const get_yh_auth_url = async ()=>{
	const res = await axios.get('/get_yh_auth_url?type=login')
	console.log(res);
	if(res.code === 200){
		yh_url.value = res.data.yh_auth_url
	}
}
get_yh_auth_url()
const to_yh = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = yh_url.value
}

const gg_url = ref('')
const get_gg_auth_url = async ()=>{
	const res = await axios.get('/get_gg_auth_url?type=login')
	// console.log(res);
	if(res.code === 200){
		gg_url.value = res.data.gg_auth_url
	}
}
get_gg_auth_url()
const to_gg = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = gg_url.value
}

const back_login = ()=>{
    isRegister.value = false
    register_info.username = ''
    register_info.password = ''
}

onMounted(()=>{
    try {
        const script = document.createElement('script');
        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback";
        script.defer = true;
        document.head.appendChild(script);
    } catch (error) {
        
    }
})

const turnstileToken = ref('')
window.onloadTurnstileCallback = function () {
    turnstile.render("#turnstile-widget-container", {
      sitekey: "0x4AAAAAAA5XWjuuv0turKm2",  // 站点密钥
      callback: function (token) {
        console.log("挑战成功，获得的 token:", token);
        setTimeout(() => {
            turnstileToken.value = token 
        }, 1200);
      },
      errorCallback: function (error) {
        console.log("Turnstile 错误:", error);
      },
    });
};


let baseUrl = ref('')

const users = [
    'b1b19539394c7e8429115766fbf86c95',
    'd7c8978cd524bae34c5954c08e19a085',
    '860921f48bd935320ca8b81b99b45445',
    '7de837f08a4efe02eb795f0e2f7f2bb2',
    '2453b28e9bd74a9028a6db5143ee3434',
    '3c5019172edb78b938f92782fea5961b',
    'db774fbe9aabb48c11218efcd12abf2f',
    '6c146c4119715cc04cb97576cb7fd940',
    '029003a1faafb8bed8cc3fc7229cb65d',
    '9614f292323683d3852b39833529e0d4',
    '8ca0873c6de7cce29fc50c4454750da3',
    'a11bd5b86385c1346522ffba25aa410e',
    'b36a3d9216581d1a54e9897bcf95fdf7',
    'ac88cde2dd7ada4fea478895d7c39e2b',
    '980e6010b3da577c4a95d0277bfa5735',
    '72719a0b7ab3cd3e018efa088eb98efc',
    '32ef473cb27b4382453ebcc9d9827de7',
    '595bb439cc8b1e1a983188a07157195d',
    '594fb821941683929ba978550082ebf1',
    'd33d7ab32adefa2bc96b5643b00373a3',
    'a0ac0febd66c2cd9a1c86eb869b69470',
    'c7f8b5675f74f4122d7229937f666558',
    '35bd623ef2f4bafeff54cdd4d2f7f7cf',
    'e481fdf407ae02e634b6e38997db92fe',
    'e75c0b8b354f89ebc8303910160af53b',
    'a905b3bb43046dbc9c68855a72670d03',
    '67851339f29713dde76299ba3f53d6d4',
    '3340d01b1eab4c3eae12725b5b5537e4',
    'd1af8313122ecba25fafe2f90e6beb04',
    '7ed8274dc1be788a86ada4a50b4c6984',
    '2ccc90a24f9e2585cb39dc5cedd8be6d',
    '8db9e078854ef9ad1bd16f072aac173a',
    '304d9f340867acdb83acba3d6786ae63',
];

const randomUser = users[Math.floor(Math.random() * users.length)];
// console.log(randomUser);

generateJWT('jwt_web', randomUser).then(result => {
    baseUrl.value = window.baseUrl+'/index.php/V1/'+result.token
});

setInterval(()=>{
    const randomUser = users[Math.floor(Math.random() * users.length)];
    // console.log(randomUser);

    generateJWT('jwt_web', randomUser).then(result => {
        baseUrl.value = window.baseUrl+'/index.php/V1/'+result.token
    });
},1800000) //30分钟

</script>

<style lang="less" scoped>
.top-header {
    width: 100%;
    height: 110px;
    z-index: 10;
    // background: linear-gradient(#2ca0d8, #2ca0d8 86px, #fff 0, #fff);
    background-color: #2ca0d8;
    .top-img {
        width: 100%;
        height: 110px;
        margin: 0 auto;
        background: url(../..//assets/logoZ.png) no-repeat;
        filter: invert(1) brightness(30);
        background-size: contain;
		background-position: center;
        transform: scale(0.8);
    }
    .top-img_en {
        width: 100%;
        height: 106px;
        margin: 0 auto;
        background: url(../..//assets/logoZ_en.png) no-repeat;
        filter: invert(1) brightness(30);
        background-size: contain;
		background-position: center 5px;
    }
}
.login_wp{
    width: 80%;
    height: 500px;
    padding-top: 82px;
    .main{
        width: 500px;
        .tabs{
            display: flex;
            justify-content: space-around;
            padding: 0 100px;
        }
        .tabs_wp {
            height: 20px;
            display: flex;
            align-items: center;
            color: #00a1d6;
            justify-content: center;
            margin: 0;
            margin-bottom: 24px;
            cursor: pointer;
        }
        .active{
            border-bottom: 1px solid #00a1d6;
        }
        .tab__form {
            width: 400px;
            height: 90px;
            border: 1px solid #e3e5e7;
            border-radius: 8px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            .form__item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                height: 44px;
                padding: 12px 20px;
                .eye-btn{
                    position: relative;
                }
                div:not(:last-child) {
                    margin-right: 20px;
                    position: relative;
                }
                input {
                    flex: 1;
                    border: none;
                }
                input:focus{
                    outline: none;
                }
                svg {
                    position: absolute;
                    top: -8px;
                    left: -10px;
                    cursor: pointer;
                    
                }
                svg:hover {
                    path{
                        fill: #00a1d6;
                    }
                }
                .clickable {
                    color: #00a1d6;
                    cursor: pointer;
                }
            }
        }
        .btn_wp {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            width: 400px;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            .btn_primary {
                width: 100%;
                height: 40px;
                cursor: pointer;
                color: #fff;
                background: #00a1d6;
                border-radius: 8px;
            }
            .btn_reg{
                width: 100% !important;
            }
            .btn_primary:hover{
                background: rgba(#00a1d6,.8);
            }
        }
        .third-party-login-wrapper {
            margin-top: 24px;
            .title {
                font-size: 13px;
                line-height: 16px;
                text-align: center;
                color: #999;
                margin-bottom: 12px;
            }
            .sns {
                // width: 300px;
                display: flex;
                justify-content: center;
                a{
                    text-decoration: none;
                    color: #000;
                }
                .btn {
                    margin-right: 30px;
                    cursor: pointer;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin: 0;
                }
                .tourist:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/tourist.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
                .facebook:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/fb.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
                .Yahoo:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/yahoo.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
                .Google:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/google.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
            }
        }
        .login-protocol {
            margin-top: 30px;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 17px;
            color: #9499a0;
            p {
                display: flex;
                justify-content: center;
                label {
                    margin: 0 6px;
                    .clickable {
                        cursor: pointer;
                        color: #00aeec;
                    }
                }
            }
        }
    }
}
.cf-turnstile{
    text-align: center;
    margin-top: 17px;
}
</style>